<!--
 * @LastEditTime : 2022-10-31 17:56:37
 * @FilePath     : /pyy/src/views/physics/add/components/detailed_project.vue
 * @Description  : 物理分析 > 新增物理分析 > 明细表 > 检测项目
-->
<template>
  <div class="detailed_project">
    <van-dialog
      v-model="visible"
      title="检测项目"
      show-cancel-button
      @cancel="close"
      @confirm="handleConfirm"
    >
      <div class="container">
        <van-collapse v-model="activeNames">
          <van-collapse-item
            v-for="(project, key) in detectionProject"
            :key="key"
            :title="key"
            :name="key"
            :value="(selectProject[key] && selectProject[key].length) || ''"
          >
            <van-checkbox-group v-model="selectProject[key]">
              <van-cell-group>
                <van-cell
                  v-for="item in project.testing"
                  :key="item"
                  :title="item"
                >
                  <template #right-icon>
                    <van-checkbox :name="item" />
                  </template>
                </van-cell>
              </van-cell-group>
            </van-checkbox-group>
          </van-collapse-item>
        </van-collapse>
      </div>
<!--
      <div class="total-amoun">金额：{{ totalAmount }}元</div>
-->
    </van-dialog>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
import api from "@/http/api";

export default {
  name: "DetailedProject",
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  props: {
    // 检验机构 id
    organizationId: { type: String, require: true },
  },
  data() {
    return {
      visible: false,
      activeNames: [],
      // 检测项目
      detectionProject: {
        // 常规分析: {
        //  price: 100.0,
        //  testing: [ "组织鉴别>>GB/T 13299-1991>>1000.00"],
        //},
      },
      selectProject: {},
    };
  },
  computed: {
    // 总金额
    totalAmount() {
      return Object.values(this.selectProject)
        .flat(Infinity)
        .reduce((all, current) => {
          const price = Number(current.split(">>").at(-1));
          return (all += Number.isNaN(price) ? 0 : price);
        }, 0);
    },
  },
  watch: {
    // 监测 检验机构, 发生改变后重置组件数据
    organizationId() {
      this.reset();
      this.$emit("confirm", this.selectProject, this.totalAmount);
    },
  },
  methods: {
    /**
     * 显示弹窗, 获取 检测项目
     * @desc: 根据 检验机构 获取 检验项目, 获取成功后显示弹窗
     */
    show() {
      if (!this.organizationId) return Toast.fail("请选择检验机构");

      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
      });
      api.physics.getCategoryEnum(this.organizationId).then((res) => {
        toast.clear();
        const { code, data, msg } = res.data || {};
        if (code !== 200) return Toast.fail(msg);

        this.detectionProject = data;
        this.visible = true;
      });
    },

    close() {
      this.visible = false;
    },

    /**
     * 重置组件数据
     */
    reset() {
      // 初始化 data 声明数据
      Object.assign(this.$data, this.$options.data());
    },

    /**
     * 点击确认
     */
    handleConfirm() {
      this.$emit("confirm", this.selectProject, this.totalAmount);
      this.close();
    },
  },
};
</script>

<style lang="less" scoped>
.detailed_project {
  /deep/ .van-dialog {
    .van-dialog__header {
      padding: 10px 0;
    }

    .van-dialog__content {
      .container {
        width: 100%;
        height: 50vh;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 0 10px;

        .van-collapse {
          .van-collapse-item {
            .van-collapse-item__title {
              .van-cell__value {
                flex: none;
                width: max-content;
              }
            }

            .van-collapse-item__wrapper {
              .van-collapse-item__content {
                padding-top: 0;
                padding-bottom: 0;

                .van-checkbox-group {
                  .van-cell-group {
                    background-color: rgb(247, 248, 250);

                    .van-cell {
                      padding: 6px 10px;
                      background-color: rgb(247, 248, 250);

                      .van-cell__title {
                        font-size: 14px;
                        white-space: break-spaces;
                        word-break: break-all;
                        box-sizing: border-box;
                        padding-right: 4px;
                      }

                      .van-checkbox {
                        .van-checkbox__icon {
                          i {
                            font-size: 13px;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .total-amoun {
        width: 100%;
        box-sizing: border-box;
        padding: 6px 24px;
        font-size: 14px;
      }
    }
  }
}
</style>
